<template>
	<div class="my-header">
		<div class="tc header-txt">
			<slot name="title">{{title}}</slot>
		</div>
		<div class="header-handle-slot">
			<div class="fl flex" style="height: 100%;justify-content: center;flex-direction: column;" @click="back" v-if="backBtn">
				<img src="../../static/img/icon-back.png" alt="" height="15px">
			</div>
			<div class="fl" v-else>
				<slot name="left"></slot>
			</div>
			<div class="fr">
				<slot name="right"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "微幼云"
			},
			backBtn: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		methods: {
			back() {
				history.back(0);
				// let _query = JSON.parse(this.$Cookies.get('query'));
				// this.$router.push({
				// 	path: this.$Cookies.get('from'),
				// 	query: _query
				// })
			}
		}
	}
</script>

<style>
	.my-header {
		position: relative;
		height: 4.4rem;
		width: 100%;
		background: #36C12D;
		color: #fff;
		line-height: 4.4rem;
		font-size: 1.8rem;
	}

	.my-header a {
		color: #fff;
	}

	.header-txt {
		width: 100%;
		height: 100%;
	}

	.header-handle-slot {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 1rem;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		font-size: 1.4rem;
	}
</style>
